<template>
	<div class="supplier_view footer-page">
		<el-form :model="viewForm" :rules="rules" ref="viewForm" class="demo-ruleForm" :class="{'edit_form':isEdit}">
			<el-tabs v-model="activeName" @tab-click="handleTabClick">
				<el-tab-pane label="基本信息" name="base">
					<p class="edit-header">
						<span>店铺信息</span>
					</p>
					<div class="info_list">
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>店铺头像:</label>
									<div class="flex-1">
										<preview-img v-if="!isEdit" :img-url="viewForm.photo"></preview-img>
										<el-form-item v-else prop="photo">
											<crop-upload show-type="photo" :init-val="viewForm.photo"
												wrapper-width="95px" wrapper-height="95px"
												@setVal="(val)=>setUrl('photo',val)"></crop-upload>
										</el-form-item>
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>店铺名称:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.shopname}}</p>
										<el-form-item v-else prop="shopname">
											<el-input clearable v-model="viewForm.shopname"></el-input>
										</el-form-item>
									</div>
								</div>
							</el-col>
						</el-row>
						<!--         <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span
                      v-if="isEdit"
                      class="required-icon"
                    >*</span>经营项目:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{viewForm.category_name}}</p>
                    <el-form-item
                      v-else
                      prop="category_name"
                    >
                      <el-input
                        disabled
                        v-model="viewForm.category_name"
                      ></el-input>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span
                      v-if="isEdit"
                      class="required-icon"
                    >*</span>账户类型:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{viewForm.account_name}}</p>
                    <el-form-item
                      v-else
                      prop="account"
                    >
                      <el-select
                        clearable
                        v-model="viewForm.account"
                        @change="accountTypeChange"
                      >
                        <el-option
                          label="融资账户"
                          :value="1"
                        ></el-option>
                        <el-option
                          label="非融资账户"
                          :value="2"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row> -->
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>是否风控:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.account_type_name}}</p>
										<el-form-item v-else prop="account_type">
											<el-select clearable :disabled="viewForm.account==1"
												v-model="viewForm.account_type">
												<el-option label="风控" :value="1"></el-option>
												<el-option label="不风控" :value="2"></el-option>
											</el-select>
										</el-form-item>
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>发票类型:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.faptype_name}}</p>
										<el-form-item v-else prop="faptype">
											<el-select clearable v-model="viewForm.faptype">
												<el-option label="普通发票" value="1"></el-option>
												<el-option label="增值税发票" value="2"></el-option>
												<el-option label="普通发票+增值税发票" value="1,2"></el-option>
											</el-select>
										</el-form-item>
									</div>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>当前经营位置:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{shopcity}}</p>
										<el-form-item v-else prop="shopcity">
											<el-cascader clearable filterable placeholder="请选择当前经营位置"
												v-model="viewForm.shopcity" :options="regionList" :props="optionProps"
												separator="-"></el-cascader>
										</el-form-item>
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>店铺联系人:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.people}}</p>
										<el-form-item v-else prop="people">
											<el-input clearable v-model="viewForm.people"></el-input>
										</el-form-item>
									</div>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>联系人手机号:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.contact_tel}}</p>
										<el-form-item v-else prop="contact_tel">
											<el-input clearable v-model="viewForm.contact_tel"></el-input>
										</el-form-item>
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>客服电话:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.mobile}}</p>
										<el-form-item v-else prop="mobile">
											<el-input clearable v-model="viewForm.mobile"></el-input>
										</el-form-item>
									</div>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>签署合同类型:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.contract_type_name}}</p>
										<el-form-item v-else prop="contract_type">
											<el-select clearable v-model="viewForm.contract_type"
												@change="contractTypeChange">
												<el-option label="蚂蚁智能合同" :value="1"></el-option>
												<el-option label="E签宝合同" :value="2"></el-option>
											</el-select>
										</el-form-item>
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>签署方式:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.sign_num_name}}</p>
										<el-form-item v-else prop="sign_num">
											<el-select clearable :disabled="viewForm.contract_type==1"
												v-model="viewForm.sign_num">
												<el-option label="自营两方" :value="1"></el-option>
												<el-option label="供应商两方" :value="2"></el-option>
												<el-option label="三方" :value="3"></el-option>
											</el-select>
										</el-form-item>
									</div>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="flex">
									<label>是否开启城市定位:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.is_city_location_name}}</p>
										<el-form-item v-else prop="is_city_location">
											<el-select clearable v-model="viewForm.is_city_location">
												<el-option label="开启" :value="1"></el-option>
												<el-option label="关闭" :value="2"></el-option>
											</el-select>
										</el-form-item>
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>店铺邮箱:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.email}}</p>
										<el-form-item v-else prop="email">
											<el-input clearable v-model="viewForm.email"></el-input>
										</el-form-item>
									</div>
								</div>
							</el-col>
						</el-row>
						<!-- <el-row :gutter="20">
              <el-col
                v-if="isEdit"
                :span="24"
              >
                <div class="flex">
                  <label><span class="required-icon">*</span>是否开启城市定位:</label>
                  <div class="flex-1">
                    <el-form-item prop="is_city_location">
                      <el-select
                        clearable
                        v-model="viewForm.is_city_location"
                      >
                        <el-option
                          label="开启"
                          :value="1"
                        ></el-option>
                        <el-option
                          label="关闭"
                          :value="2"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row> -->
					</div>
					<p class="edit-header">
						<span>公司信息</span>
					</p>
					<div class="info_list">
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>公司名称:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.mechanism}}</p>
										<el-form-item v-else prop="mechanism">
											<el-input clearable v-model="viewForm.mechanism"></el-input>
										</el-form-item>
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>工商注册号:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.companyid}}</p>
										<el-form-item v-else prop="companyid">
											<el-input clearable v-model="viewForm.companyid"></el-input>
										</el-form-item>
									</div>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="flex area_item">
									<label><span v-if="isEdit" class="required-icon">*</span>公司所在区域:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{companyArea}}</p>
										<el-form-item v-else prop="company_area">
											<el-cascader clearable filterable placeholder="请选择公司所在区域"
												v-model="viewForm.company_area" :options="areaList" :props="optionProps"
												separator="-"></el-cascader>
										</el-form-item>
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>公司地址:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.company}}</p>
										<el-form-item v-else prop="company">
											<el-input clearable v-model="viewForm.company"></el-input>
										</el-form-item>
									</div>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>法人姓名:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.faname}}</p>
										<el-form-item v-else prop="faname">
											<el-input clearable :maxlength="10" v-model="viewForm.faname"></el-input>
										</el-form-item>
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>法人身份证号:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.idcard}}</p>
										<el-form-item v-else prop="idcard">
											<el-input clearable v-model="viewForm.idcard"></el-input>
										</el-form-item>
									</div>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>营业执照:</label>
									<div class="flex-1">
										<preview-img v-if="!isEdit" :img-url="viewForm.shopcard"></preview-img>
										<el-form-item v-else prop="shopcard">
											<crop-upload show-type="photo" :init-val="viewForm.shopcard"
												wrapper-width="95px" wrapper-height="95px"
												@setVal="(val)=>setUrl('shopcard',val)"></crop-upload>
										</el-form-item>
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>公司门头照:</label>
									<div class="flex-1">
										<preview-img v-if="!isEdit" :img-url="viewForm.doorphoto"></preview-img>
										<el-form-item v-else prop="doorphoto">
											<crop-upload show-type="photo" :init-val="viewForm.doorphoto"
												wrapper-width="95px" wrapper-height="95px"
												@setVal="(val)=>setUrl('doorphoto',val)"></crop-upload>
										</el-form-item>
									</div>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>公章图片:</label>
									<div class="flex-1">
										<preview-img v-if="!isEdit" :img-url="viewForm.seal_url"></preview-img>
										<el-form-item v-else prop="seal_url">
											<crop-upload show-type="photo" :init-val="viewForm.seal_url"
												wrapper-width="95px" wrapper-height="95px"
												@setVal="(val)=>setUrl('seal_url',val)"></crop-upload>
										</el-form-item>
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>身份证正面照:</label>
									<div class="flex-1">
										<preview-img v-if="!isEdit" :img-url="viewForm.faidcard"></preview-img>
										<el-form-item v-else prop="faidcard">
											<crop-upload show-type="photo" :init-val="viewForm.faidcard"
												wrapper-width="95px" wrapper-height="95px"
												@setVal="(val)=>setUrl('faidcard',val)"></crop-upload>
										</el-form-item>
									</div>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>身份证背面照:</label>
									<div class="flex-1">
										<preview-img v-if="!isEdit" :img-url="viewForm.faidcard_back"></preview-img>
										<el-form-item v-else prop="faidcard_back">
											<crop-upload show-type="photo" :init-val="viewForm.faidcard_back"
												wrapper-width="95px" wrapper-height="95px"
												@setVal="(val)=>setUrl('faidcard_back',val)"></crop-upload>
										</el-form-item>
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>授权公章编号:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.esign_seal_id}}</p>
										<el-form-item v-else prop="esign_seal_id">
											<el-input clearable v-model="viewForm.esign_seal_id"></el-input>
										</el-form-item>
									</div>
								</div>
							</el-col>
						</el-row>
					</div>
					<template v-if="!isEdit">
						<p class="edit-header">
							<span>操作记录</span>
						</p>
						<div class="info_list">
							<el-table :data="tableData">
								<el-table-column prop="operation_content" label="内容" />
								<el-table-column prop="operator" label="操作人" width="180" />
								<el-table-column prop="operation_time" label="操作时间" width="200" />
							</el-table>
						</div>
					</template>
				</el-tab-pane>
				<el-tab-pane label="提现信息" name="withdraw">
					<p class="edit-header">
						<span>支付宝信息</span>
					</p>
					<div class="info_list">
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="flex">
									<label>支付宝姓名:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.payeename}}</p>
										<el-form-item v-else prop="payeename">
											<el-input clearable v-model="viewForm.payeename"></el-input>
										</el-form-item>
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="flex">
									<label>支付宝账号:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.alipayaccount}}</p>
										<el-form-item v-else prop="alipayaccount">
											<el-input clearable v-model="viewForm.alipayaccount"></el-input>
										</el-form-item>
									</div>
								</div>
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
				<el-tab-pane label="增值服务信息" name="service">
					<p class="edit-header">
						<span>短信增值服务信息</span>
					</p>
					<div class="info_list">
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>短信剩余数量:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.sms_num}}</p>
										<el-form-item v-else prop="sms_num">
											<el-input clearable v-model="viewForm.sms_num"></el-input>
										</el-form-item>
									</div>
								</div>
							</el-col>
							<el-col :span="12"></el-col>
						</el-row>
					</div>
					<p class="edit-header">
						<span>百融风控信息</span>
					</p>
					<div class="info_list">
						<el-row :gutter="20">
							<el-col :span="24">
								<div class="flex">
									<label>是否开启百融风控:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.risk_credit_status == 1? '开启' : '关闭' }}</p>
										<el-form-item v-else class="guarantee_item" style="margin-bottom:0">
											<el-select style="width:100px;margin-bottom:10px" clearable
												v-model="viewForm.risk_credit_status">
												<el-option label="开启" :value="1"></el-option>
												<el-option label="关闭" :value="2"></el-option>
											</el-select>
										</el-form-item>
									</div>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>百融风控余量:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{viewForm.risk_credit_amount}}</p>
										<el-form-item v-else prop="risk_credit_amount">
											<el-input clearable v-model="viewForm.risk_credit_amount"></el-input>
										</el-form-item>
									</div>
								</div>
							</el-col>
							<el-col :span="12"></el-col>
						</el-row>
					</div>
					<p class="edit-header">
						<span>雷达风控信息</span>
					</p>
					<div class="info_list">
						<el-row :gutter="20">
							<el-col :span="24">
								<div class="flex">
									<label>是否开启雷达风控:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{ viewForm.risk_radar_status_credit == 1 ? '开启' : '关闭' }}</p>
										<el-form-item v-else class="guarantee_item" style="margin-bottom:0">
											<el-select v-model="viewForm.risk_radar_status_credit"
												style="width:100px;margin-bottom:10px" clearable>
												<el-option label="开启" :value="1" />
												<el-option label="关闭" :value="2" />
											</el-select>
										</el-form-item>
									</div>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>雷达风控余量:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{ viewForm.risk_radar_amount_credit }}</p>
										<el-form-item v-else prop="risk_radar_amount_credit">
											<el-input v-model="viewForm.risk_radar_amount_credit" clearable />
					   		</el-form-item>
									</div>
								</div>
							</el-col>
							<el-col :span="12" />
						</el-row>
					</div>
					<p class="edit-header">
						<span>布尔数据信息</span>
					</p>
					<div class="info_list">
						<el-row :gutter="20">
							<el-col :span="24">
								<div class="flex">
									<label>是否开启布尔数据:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{ viewForm.risk_credit_status_boolea == 1 ? '开启' : '关闭' }}
										</p>
										<el-form-item v-else class="guarantee_item" style="margin-bottom:0">
											<el-select v-model="viewForm.risk_credit_status_boolea"
												style="width:100px;margin-bottom:10px" clearable>
												<el-option label="开启" :value="1" />
												<el-option label="关闭" :value="2" />
											</el-select>
										</el-form-item>
									</div>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>布尔数据余量:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{ viewForm.risk_credit_amount_boolea }}</p>
										<el-form-item v-else prop="risk_credit_amount_boolea">
											<el-input v-model="viewForm.risk_credit_amount_boolea" clearable />
										</el-form-item>
									</div>
								</div>
							</el-col>
							<el-col :span="12" />
						</el-row>
					</div>
					<p class="edit-header">
						<span>征信数据信息</span>
					</p>
					<div class="info_list">
						<el-row :gutter="20">
							<el-col :span="24">
								<div class="flex">
									<label>是否开启征信数据:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{ viewForm.risk_cre_status == 1 ? '开启' : '关闭' }}
										</p>
										<el-form-item v-else class="guarantee_item" style="margin-bottom:0">
											<el-select v-model="viewForm.risk_cre_status"
												style="width:100px;margin-bottom:10px" clearable>
												<el-option label="开启" :value="1" />
												<el-option label="关闭" :value="2" />
											</el-select>
										</el-form-item>
									</div>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="flex">
									<label><span v-if="isEdit" class="required-icon">*</span>征信数据余量:</label>
									<div class="flex-1">
										<p v-if="!isEdit">{{ viewForm.risk_cre_amount }}</p>
										<el-form-item v-else prop="risk_cre_amount">
											<el-input v-model="viewForm.risk_cre_amount" clearable />
										</el-form-item>
									</div>
								</div>
							</el-col>
							<el-col :span="12" />
						</el-row>
					</div>
				</el-tab-pane>
			</el-tabs>
		</el-form>
		<div v-if="$hasMethod('#edit')" class="page-footer-btns">
			<template v-if="!isEdit">
				<el-button size="small" @click="$router.back()">返回</el-button>
				<el-button size="small" type="primary" @click="isEdit=true">修改信息</el-button>
			</template>
			<template v-else>
				<el-button size="small" @click="cancelEdit">返回</el-button>
				<el-button size="small" type="primary" @click="submit">保存</el-button>
			</template>
		</div>
	</div>
</template>

<script>
	import previewImg from "@/components/previewImg";
	import {
		getSupplierInfo,
		editSupplier
	} from "@/api/user";
	import cropUpload from "@/components/cropUpload";
	import {
		checkPhone,
		checkCompanyId,
		checkCardId,
		checkMobile,
		checkName,
		checkAlipayAccount,
		checkEmail
	} from '@/utils/validate';
	import {
		getRegion
	} from "@/api/order";
	export default {
		components: {
			previewImg,
			cropUpload
		},
		props: ["viewId", "toEdit"],
		data() {
			let validateMobile = (rule, value, callback) => {
				if (!checkPhone(value) && !checkMobile(value)) {
					callback(new Error('客服电话格式错误'));
				} else {
					callback();
				}
			}
			let validateTel = (rule, value, callback) => {
				if (!checkMobile(value)) {
					callback(new Error('联系人手机号格式错误'));
				} else {
					callback();
				}
			}
			let validateCompanyId = (rule, value, callback) => {
				if (!checkCompanyId(value)) {
					callback(new Error('工商注册号格式错误'));
				} else {
					callback();
				}
			}
			let validateIdcard = (rule, value, callback) => {
				if (!checkCardId(value)) {
					callback(new Error('法人身份证号格式错误'));
				} else {
					callback();
				}
			}
			let validateName = (rule, value, callback) => {
				if (value && !checkName(value)) {
					callback(new Error('支付宝姓名格式错误'));
				} else {
					callback();
				}
			}
			let validateAccount = (rule, value, callback) => {
				if (value && !checkAlipayAccount(value)) {
					callback(new Error('支付宝账号格式错误'));
				} else {
					callback();
				}
			}
			let validateCount = (rule, value, callback) => {
				if (/^(\-|\+)?\d+(\.\d+)?$/.test(value)) {
					callback();
				} else {
					callback(new Error('数量输入错误'));
				}
			}
			let validateEmail = (rule, value, callback) => {
				if (value && !checkEmail(value)) {
					callback(new Error('店铺邮箱格式错误'));
				} else {
					callback();
				}
			}
			return {
				activeName: "base",
				isEdit: false,
				tableData: [],
				viewForm: {},
				rules: {
					shopname: [{
						required: true,
						message: '店铺名称不能为空',
						trigger: 'blur'
					}],
					account: [{
						required: true,
						message: '请选择账户类型',
						trigger: 'change'
					}],
					account_type: [{
						required: true,
						message: '请选择是否开启风控',
						trigger: 'change'
					}],
					faptype: [{
						required: true,
						message: '请选择发票类型',
						trigger: 'change'
					}],
					shopcity: [{
						required: true,
						message: '当前经营位置不能为空',
						trigger: 'change'
					}],
					people: [{
						required: true,
						message: '店铺联系人不能为空',
						trigger: 'blur'
					}],
					mobile: [{
							required: true,
							message: '客服电话不能为空',
							trigger: 'blur'
						},
						{
							validator: validateMobile,
							trigger: 'blur'
						}
					],
					contact_tel: [{
							required: true,
							message: '联系人手机号不能为空',
							trigger: 'blur'
						},
						{
							validator: validateTel,
							trigger: 'blur'
						}
					],
					contract_type: [{
						required: true,
						message: '请签署合同类型',
						trigger: 'change'
					}],
					sign_num: [{
						required: true,
						message: '请选择签署方式',
						trigger: 'change'
					}],
					mechanism: [{
						required: true,
						message: '公司名称不能为空',
						trigger: 'blur'
					}],
					email: [{
							required: true,
							message: '店铺邮箱不能为空',
							trigger: 'blur'
						},
						{
							validator: validateEmail,
							trigger: 'blur'
						}
					],
					companyid: [{
							required: true,
							message: '工商注册号不能为空',
							trigger: 'blur'
						},
						{
							validator: validateCompanyId,
							trigger: 'blur'
						}
					],
					company_area: [{
						required: true,
						message: '请选择公司所在区域',
						trigger: 'change'
					}],
					company: [{
						required: true,
						message: '公司地址不能为空',
						trigger: 'blur'
					}],
					faname: [{
						required: true,
						message: '法人姓名不能为空',
						trigger: 'blur'
					}],
					idcard: [{
							required: true,
							message: '法人身份证号不能为空',
							trigger: 'blur'
						},
						{
							validator: validateIdcard,
							trigger: 'blur'
						}
					],
					shopcard: [{
						required: true,
						message: '请上传营业执照',
						trigger: 'change'
					}],
					photo: [{
						required: true,
						message: '请上传店铺头像',
						trigger: 'change'
					}],
					doorphoto: [{
						required: true,
						message: '请上传公司门头照',
						trigger: 'change'
					}],
					seal_url: [{
						required: true,
						message: '请上传公章图片',
						trigger: 'change'
					}],
					faidcard: [{
						required: true,
						message: '请上传身份证正面照',
						trigger: 'change'
					}],
					faidcard_back: [{
						required: true,
						message: '请上传身份证背面照',
						trigger: 'change'
					}],
					esign_seal_id: [{
						required: true,
						message: '请输入授权公章编号',
						trigger: 'change'
					}],
					company_area: [{
						required: true,
						message: '请选择公司所在区域',
						trigger: 'change'
					}],
					is_city_location: [{
						required: true,
						message: '请选择是否开启城市定位',
						trigger: 'change'
					}],
					// payeename: [
					//   // { required: true, message: '支付宝姓名不能为空', trigger: 'blur' },
					//   { validator: validateName, trigger: 'blur' }
					// ],
					alipayaccount: [
						// { required: true, message: '支付宝账号不能为空', trigger: 'blur' },
						{
							validator: validateAccount,
							trigger: 'blur'
						}
					],
					sms_num: [{
							required: true,
							message: '短信剩余数量不能为空',
							trigger: 'blur'
						},
						{
							validator: validateCount,
							trigger: 'blur'
						}
					],
					risk_credit_amount: [{
							required: true,
							message: '风控余量不能为空',
							trigger: 'blur'
						},
						{
							validator: validateCount,
							trigger: 'blur'
						}
					]
				},
				optionProps: {
					value: 'name',
					label: 'name',
					expandTrigger: 'hover',
					children: 'sub'
				},
				regionList: [],
				areaList: [],
				shopcity: '',
				companyArea: ''
			}
		},
		methods: {
			getAreaId(arr) {
				for (let p of this.areaList) {
					if (p.name == arr[0]) {
						for (let c of p.sub) {
							if (c.name == arr[1]) {
								return c.id;
							}
						}
					}
				}
				return '';
			},
			contractTypeChange(val) {
				if (val == 1) {
					this.viewForm.sign_num = 1;
				}
			},
			accountTypeChange(val) {
				if (val == 1) {
					this.viewForm.account_type = 1;
				}
			},
			setUrl(key, value) {
				this.viewForm[key] = value;
			},
			handleTabClick(tab, event) {
				// this.cancelEdit();
			},
			// 取消更改 
			cancelEdit() {
				if (this.toEdit) {
					this.$router.back()
				} else {
					this.isEdit = false;
					this.getData();
				}
			},
			// 保存提交
			submit() {
				this.$refs['viewForm'].validate((valid) => {
					if (valid) {
						let params = {
							photo: "",
							shopname: "",
							account: null,
							account_type: null,
							faptype: "",
							shopcity: "",
							people: "",
							mobile: "",
							email: "",
							contact_tel: "",
							contract_type: null,
							sign_num: null,
							mechanism: "",
							companyid: "",
							company_area: "",
							area_id: "",
							company: "",
							faname: "",
							idcard: "",
							shopcard: "",
							doorphoto: "",
							seal_url: "",
							faidcard: "",
							faidcard_back: "",
							esign_seal_id: "",
							is_city_location: 2,
							payeename: "",
							alipayaccount: "",
							sms_num: 0,
							risk_credit_status: "",
							risk_credit_amount: "",
							risk_radar_amount_credit: '',
							risk_radar_status_credit: '',
							risk_credit_status_boolea: '',
							risk_credit_amount_boolea: '',
							risk_cre_status: '',
							risk_cre_amount: '',
						}
						for (let key in params) {
							params[key] = this.viewForm[key];
						}
						params.id = this.viewId;
						params.area_id = this.getAreaId(params.company_area);
						params.company_area = params.company_area.join('-');
						params.shopcity = params.shopcity.join('-');
						// console.log(params);
						editSupplier(params).then(res => {
							this.isEdit = false;
							this.getData();
						})
					} else {
						this.$message({
							message: "表单信息不完整或有错误，请检查完整表单",
							type: "error"
						});
						return false;
					}
				});
			},
			getData() {
				getSupplierInfo(this.viewId).then(res => {
					// console.log(res);
					this.viewForm = {
						...res.shopInfo,
						...res.companyInfo,
						...res.withdrawInfo,
						...res.incrementInfo,
						...res.functionSetInfo
					};
					this.tableData = res.operationRecord;
					this.shopcity = this.viewForm.shopcity;
					const cityArr = this.viewForm.shopcity.split('-');
					this.viewForm.shopcity = cityArr;
					this.companyArea = this.viewForm.company_area;
					const areaArr = this.viewForm.company_area.split('-');
					this.viewForm.company_area = areaArr;
					if (this.toEdit) {
						this.isEdit = true;
						this.$route.meta.title = "编辑供应商资料";
					} else {
						this.$route.meta.title = "查看供应商资料";
					}
				})
			},
			getProvice() {
				getRegion().then(res => {
					this.regionList = res ? res[0].sub : [];
					this.areaList = res ? [...res[0].sub] : [];
					const index = this.areaList.findIndex(k => k.id == 7459);
					this.areaList.splice(index, 1);
				})
			}
		},
		mounted() {
			this.getData();
			this.getProvice();
		}
	}
</script>

<style lang="scss" scoped>
	.supplier_view {
		.info_list {
			padding: 20px 0;
		}

		.el-image {
			width: 95px;
			height: 95px;
		}

		.el-row {
			margin-bottom: 20px;
		}

		label {
			width: 200px;
			margin-right: 10px;
		}
	}

	.item_inline_form {
		display: inline-block;
		margin-left: 20px;
		border: 1px solid #e6e6e6;
		border-radius: 3px;
		margin-bottom: 10px;

		&>span {
			display: inline-block;
			height: 100%;
			background-color: $gray-bg;
			padding: 0 10px;
			border-right: 1px solid #e6e6e6;
		}

		/deep/.el-input__inner {
			border: none;
		}
	}

	.tip {
		color: #bbbbbb;
		padding-left: 210px;
	}

	.edit_form label {
		padding-top: 12px;
	}

	.required-icon {
		margin-right: 2px;
	}
</style>
<style lang="scss">
	.guarantee_item,
	.area_item {
		.el-select .el-input {
			width: 100%;
		}
	}

	.area_item .el-form-item {
		margin-bottom: 10px;
	}
</style>
